import React, { useCallback, useState } from "react";
import Son from "./Son";

export default function MemoDemo() {
  console.log("MemoDemo被调用了");
  const [count, setCount] = useState(8);
  const [price, setPrice] = useState(2.5);

  const changeCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const changePrice = useCallback(() => {
    setPrice(price + 1);
  }, [price]);

  // useCallBack：
  //   当依赖的状态（第二个参数）发生变化时，才重新定义函数（第一个参数）
  const fn = useCallback(function () {
    console.log("fn");
  }, []);

  return (
    <div>
      <h1>UseCallBack</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />
      <input type="button" value="修改价格" onClick={changePrice} />
      <hr />
      <Son price={price} fn={fn}></Son>
    </div>
  );
}
